<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import axios from "axios";
import conf from "@/conf/conf";
const fileList = ref<File[]>([]);
const upload = ref<UploadInstance>();
// 上传成功回调
const submitUpload = () => {
  upload.value!.submit();
};

// 文件超出限制
const handleExceed: UploadProps["onExceed"] = (files) => {
  if (files.length === 0) {
    ElMessage.error("请选择文件");
  }
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};
// 文件移除
const handleRemove = (file: File) => {
  ElMessage.info(`移除文件${file.name}`);
};
// 文件上传成功
const handleSuccess = (res: any, file: File) => {
  console.log(res);
  console.log(file);
  if (res.code === 0) {
    ElMessage.success(`上传成功${file.name}`);
  } else {
    ElMessage.error(`上传失败${file.name}`);
  }
};
// 上传前校验
const beforeUpload = (file: File[]) => {
  console.log("检查");
  if (file.length === 0) {
    ElMessage.error("请选择文件");
    return false;
  }
  console.log(file[0]);

  upload.value!.submit();
  return true;
};

const uploadHttpRequest = (param: any) => {
  if (!param.file) {
    ElMessage.error("请选择文件");
    console.log("请选择文件");
  }
  let formData = new FormData();
  formData.append("file", param.file);
  axios({
    url: conf.url + "/archive/import",
    method: "post",
    data: formData,
  }).then((res) => {
    if (res.data.code === 0) {
      ElMessage.success(`上传成功,${res.data.data}`);
      upload.value!.clearFiles();
    } else {
      ElMessage.error(`上传失败,${res.data.message}`);
    }
  });
};
const handleError = (err: any, file: File) => {
  console.error(err);
  ElMessage.error(`上传失败${file.name}`);
};
</script>
<template>
  <h1>Excel批量上传</h1>
  <div id="singleUploadPage">
    <el-upload
      v-model:file-list="fileList"
      ref="upload"
      class="upload-demo"
      :limit="1"
      :on-exceed="handleExceed"
      accept=".xlsx,.xls"
      :auto-upload="false"
      action="#"
      :http-request="uploadHttpRequest"
      :on-before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-error="handleError"
      :multiple="false"
      method="post"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="ml-3" type="success" @click="submitUpload">
        上传文件
      </el-button>
      <template #tip>
        <div class="el-upload__tip">
          只能上传Excel文件，文件大小不能超过5M，一次只能上传10个文件
        </div>
        <el-divider />
        <span style="color: #999; font-size: 20px; user-select: none">
          选中文件后点击上传按钮进行上传
        </span>
        <br />
        <span style="color: #999; font-size: 16px; user-select: none">
          上传文件后，请勿关闭页面，后台会自动处理上传文件
        </span>
        <br />
        <span style="color: #999; font-size: 17px; user-select: none">
          excel格式
        </span>
          <table
    border="1"
    style="width: 100%;color: #999; border-color: #999; border-collapse: collapse;"
  >
    <tbody align="center">
      <tr>
        <td>姓名</td>
        <td>身份证号</td>
        <td>学历</td>
        <td>政治面貌</td>
        <td>生源所在地</td>
        <td>毕业时间</td>
        <td>学号</td>
        <td>院系</td>
        <td>专业</td>
        <td>档案转寄单位名称</td>
        <td>档案号</td>
        <td>调档方式</td>
        <td>快递单号</td>
        <td>调档日期</td>
      </tr>
    </tbody>
  </table>
      </template>
    </el-upload>
  </div>
</template>
<style scoped>
#singleUploadPage {
  padding: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 100px;
}
.ml-3 {
  margin-left: 40px;
}
h1 {
  text-align: center;
  margin-top: 20px;
  font-family: "Microsoft YaHei", sans-serif;
}

.el-icon-text {
  font-size: 20px;
  color: white;
  font-weight: 600;
  font-family: "黑体";
}
</style>
